<script setup lang="ts">

</script>

<template>
  <div class="login">
 <el-form
 ref="loginRef"
 class="login-form"
 >
 <h3 class="title">企业数字化平台管理系统</h3>
 <el-form-item prop="username">
 <el-input
 type="text"
 size="large"
 auto-complete="off"
 placeholder="请输⼊⽤户名"
 prefix-icon="User"
 >
 </el-input>
 </el-form-item>
 <el-form-item prop="password">
 <el-input
 type="password"
 size="large"
 auto-complete="off"
 placeholder="请输⼊密码"
 prefix-icon="Lock"
 show-password
 >
 </el-input>
 </el-form-item>
 <div class="login-options">
 <el-checkbox style="margin:0px 0px 25px 0px;">
 记住密码
 </el-checkbox>
 <el-link type="primary" :underline="false" >
 忘记密码？
 </el-link>
 </div>
 <el-form-item style="width:100%;">
 <el-button
 size="large"
 type="primary"
 style="width:100%;"
 >
 <span>登 录</span>
 </el-button>
 </el-form-item>
 <div class="register-link">
 <span>还没有账号？</span>
 <el-link type="primary" :underline="false" >
 ⽴即注册
 </el-link>
 </div>
 </el-form>
 <!-- 底部 -->
 <div class="el-login-footer">
 <span>Copyright © 2013-2025 <a href="#" target="_blank">企业数字化平
台管理系统</a> 版权所有.</span>
 </div>
 </div>
</template>

<style scoped lang="scss">
.login {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-image: url("@/assets/image/bg.png");
 background-size: cover;
 .login-form {
 border-radius: 6px;
 background: #ffffff;
 width: 400px;
 padding: 25px 25px 25px 25px;
 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 .title {
 margin: 0px auto 30px auto;
 text-align: center;
 color: #707070;
 font-size: 20px;
 font-weight: bold;
 }
 .el-input {
 height: 40px;
 :deep(.el-input__wrapper) {
 padding: 0 15px;
 }
 }
 .login-options {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 25px;
 }
 .register-link {
 text-align: center;
 margin-top: 20px;
 font-size: 14px;
 color: #606266;
 }
 }
 .el-login-footer {
 height: 40px;
 line-height: 40px;
 position: fixed;
 bottom: 0;
 width: 100%;
 text-align: center;
 color: #fff;
 font-family: Arial;
 font-size: 12px;
 letter-spacing: 1px;
 a {
 color: white;
 text-decoration: none;
 &:hover {
 text-decoration: underline;
 }
 }
 }
}
</style>